<template>
  <div class="scalable-pages">
    <main class="main">
      <div class="bg-white">
        <div class="">
          <div class="featured-news">
            <div class="news-image">
              <img src="/static/group_4.png" />
            </div>
            <div class="news-content" v-animate-on-scroll="'slideInRight'">
              <h3 class="content-title">KDX全新智能SUV全球首发</h3>
              <div class="red"></div>
              <p class="content-desc">
                2023年3月22日，KDX汽车在杭州国际中心车展上隆重发布智能电动SUV-KDX
                GT。新车基于纯电动平台打造，支持800V高压快充，仅需15分钟即可充电至80%。同时，新车搭载了KDX最新研发的自动驾驶系统，能够实现L4级自动驾驶功能。KDX
                GT预计将于今年第四季度正式上市，售价区间为25-35万元。
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="news-container">
        <div class="container">
          <div class="news-grid">
            <div class="news-item" v-for="(item, index) in newsList" :key="index" @click="handleClick(item)">
              <div class="item-image">
                <img :src="item.cover_image" :alt="item.title" />
              </div>
              <h4 class="item-title">{{ item.title }}</h4>
              <p class="item-desc">{{ filterContent(item.content, 60) }}</p>
              <div>
                <a href="#" class="read-more">了解更多 &gt;</a>
              </div>
            </div>
          </div>
        </div>

        <div class="page-container">
          <div class="pagination">
            <button class="page-btn" :disabled="pagination.page === 1" @click="goToPage(pagination.page - 1)">
              上一页
            </button>

            <template v-for="page in displayedPages" :key="page">
              <button v-if="page === '...'" class="page-ellipsis" disabled>
                ...
              </button>
              <button v-else class="page-number" :class="{ active: page === pagination.page }" @click="goToPage(page)">
                {{ page }}
              </button>
            </template>

            <button class="page-btn" :disabled="pagination.page === pagination.totalPages"
              @click="goToPage(pagination.page + 1)">
              下一页
            </button>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { get } from "@/utils/request";

export default {
  data() {
    return {
      newsList: [],
      pagination: {
        page: 1,
        pageSize: 6,
        total: 0,
        totalPages: 1,
      },
      maxVisiblePages: 5,
    };
  },
  created() {
    this.getNewsList();
  },
  computed: {
    displayedPages() {
      const range = [];
      const half = Math.floor(this.maxVisiblePages / 2);
      let start = Math.max(this.pagination.page - half, 1);
      let end = Math.min(
        start + this.maxVisiblePages - 1,
        this.pagination.totalPages
      );

      if (end - start + 1 < this.maxVisiblePages) {
        start = Math.max(end - this.maxVisiblePages + 1, 1);
      }

      // 添加第一页
      if (start > 1) {
        range.push(1);
        if (start > 2) {
          range.push("...");
        }
      }

      // 添加中间页码
      for (let i = start; i <= end; i++) {
        range.push(i);
      }

      // 添加最后一页
      if (end < this.pagination.totalPages) {
        if (end < this.pagination.totalPages - 1) {
          range.push("...");
        }
        range.push(this.pagination.totalPages);
      }

      return range;
    },
  },
  methods: {
    getNewsList() {
      get("/news/list", {
        page: this.pagination.page,
        pageSize: this.pagination.pageSize,
      }).then((res) => {
        if (res.code === 200) {
          this.newsList = res.data.list || [];
          this.pagination = {
            ...this.pagination,
            total: parseInt(res.data.pagination.total),
            totalPages: parseInt(res.data.pagination.totalPages),
          };
        }
      });
    },
    handleClick(item) {
      this.$router.push({
        path: "/news/detail",
        query: {
          id: item.id,
        },
      });
    },
    goToPage(page) {
      if (
        page < 1 ||
        page > this.pagination.totalPages ||
        page === this.pagination.page
      ) {
        return;
      }
      this.pagination.page = page;
      this.getNewsList();
      this.scrollToTop();
    },
    scrollToTop() {
      const newsContainer = document.querySelector(".news-container");
      if (newsContainer) {
        newsContainer.scrollIntoView({
          behavior: "smooth",
        });
      }
    },
    filterContent(content, length) {
      const text = content.replace(/<[^>]*>/g, "");
      if (length && text.length > length) {
        return text.substring(0, length) + "...";
      }
      return text;
    },
  },
};
</script>

<style lang="less" scoped>
.banners {
  width: 100%;
  display: black;
}

.swipers {
  width: 100%;
}

.main {
  background-color: #fff;
}

.container {
  margin: 0 auto;
}

.featured-news {
  display: flex;
  align-items: center;
  padding: 50px 0;

  .news-image {
    width: 50%;

    img {
      width: 100%;
      height: auto;
    }
  }

  .news-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-left: 4vw;
    overflow: hidden;

    .content-title {
      font-size: min(50px, 3vw);
      color: #000;
      font-weight: bold;
    }

    .red {
      width: 40px;
      height: 10px;
      background-color: #c4000a;
      margin: 3vh 0;
    }

    .content-desc {
      font-size: min(24px, 1.8vw);
      color: #333;
      line-height: 3;
      margin-bottom: 30px;
      width: 75%;
    }
  }
}

.news-container {
  background-color: #f5f5f5;
  padding: 100px 5%;

  .news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: min(50px, 6vw) min(50px, 6vw);
    margin-bottom: min(50px, 6vw);
  }

  .news-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-5px);

      .item-image img {
        transform: scale(1.05);
      }
    }

    .item-image {
      width: 100%;
      height: 300px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }
    }

    .item-title {
      font-size: min(32px, 2.6vw);
      color: #333;
      margin: 20px 20px 10px;
      font-weight: bold;
      font-size: 30px;
    }

    .item-desc {
      font-size: 23px;
      line-height: 47px;
      text-align: left;
      color: rgb(46, 46, 46);
      margin: 0 20px 20px;
    }
  }

  .read-more {
    display: block;
    text-decoration: none;
    color: rgb(197, 0, 10);
    font-size: 23px;
    text-align: right;
    margin-bottom: 20px;
    margin-right: 20px;
  }

  .page-container {
    display: flex;
    justify-content: center;
    margin-top: 50px;

    .pagination {
      display: flex;
      align-items: center;
      gap: 8px;

      button {
        border: none;
        outline: none;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 16px;
        min-width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        padding: 0 12px;

        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }

      .page-btn {
        background-color: #f5f5f5;
        color: #333;
        border: 1px solid #ddd;

        &:not(:disabled):hover {
          background-color: #e0e0e0;
        }
      }

      .page-number {
        background-color: #fff;
        color: #333;
        border: 1px solid #ddd;

        &:hover {
          background-color: #f0f0f0;
        }

        &.active {
          background-color: #000;
          color: #fff;
          border-color: #000;
        }
      }

      .page-ellipsis {
        background: none;
        border: none;
        cursor: default;
        color: #666;
        min-width: 20px;
      }
    }
  }
}
</style>